<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>收益中心</title>
	<link rel="stylesheet" href="../css/common.css">
	<style>
		.profit{
			padding: 1rem;
		}
		.profitBox{
			background: linear-gradient(to right, #d4d4d4 , #666666);
			border-radius: 8px;
			text-align: center;
			color: #fff;
			padding: 1rem 0;
		}
		.profitMoney{
			font-weight: bold;
		}
		.profitMoney span{
			font-size: 1.25rem;
		}
		.invite{
			background-color: #3c6;
			width: 6rem;
			margin: 1rem auto;
			height: 2rem;
			border-radius: 3rem;
			text-align: center;
			line-height: 2rem;
			color: #fff;
		}
		.yugu{
			float: left;
			width: 49%;
			text-align: center;
			padding: .3rem 0;
			border-right: 1px solid #fff;
		}
		.yugu:last-child{
			border: none;
		}
		.tuiguang{
			margin: 1rem 0;
			padding: .5rem;
			border: 1px solid #CC9933;
			border-radius: 4px;
			display: flex;
			align-items: center;
		}
		.tuiguang img{
			width: 2rem;
			float: left;
		}
		.tuiguangIntro{
			float: left;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			margin:0 .5rem;
		}
		.tuiguangBtn{
			float: right;
			background: linear-gradient(to right, #bb9d5f , #d8b978);
			width: 5rem;
			height: 1.5rem;
			text-align: center;
			line-height: 1.5rem;
			color: #f3e9d6;
			border-radius: 2rem;
			font-size: 0.75rem;
		}
		.waitProfot{
			padding: 1rem ;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-image: url(../assets/bac.png);
			background-size: cover;
			background-position: center;
			color: #fff;
		}
		.cuoguo img{
			width: 1.2rem;
			float: left;
			margin-bottom: .5rem;
		}
		.cuoguo span {
			margin-left: .5rem;
		}
		.waitMoney span{
			font-size: 1.125rem;
		}
		.waitRight{
			text-align: center;
		}
		.look{
			background-color: #018e87;
			width: 7rem;
			color: #fff;
			text-align: center;
			height: 1.8rem;
			line-height: 2rem;
			border-radius: 2rem;
			margin-bottom: .5rem;
		}
		.userInfor{
			margin: 1.5rem 0;
			display: flex;
			align-items: center;
		}
		.userInforList{
			box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
			width: 48%;
			margin-right: 4%;
			padding: .5rem 1rem;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
		}
		.userInforList:last-child{
			margin-right: 0;
		}
		.userLeft{
			width: 100%;
			margin-left: 1rem;
		}
		.userRight img{
			width: 0.625rem;
			height: 1.5rem;
		}
		.yuan{
			width: 0.5rem;
			height: 0.5rem;
			border: 1px solid #FF0000;
			border-radius: 100%;
			position: absolute;
			top: .7rem;
			left: 1rem;
		}
		.user_title{
			color: #888;
		}
		.userMoney{
			font-size: 1rem;
			color: #CC9933;
		}
		.modelTop{
			padding-bottom: .5rem;
			border-bottom: 1px solid #f5f5f5;
		}
		.modelTitle{
			float: left;
			font-size: 1rem;
			font-weight: bold;
		}
		.modelMore{
			float: right;
			font-size: 0.75rem;
			color: #888;
		}
		.modelIntro{
			color: #FF9900;
			text-align: center;
			margin: 1rem 0;
		}
		.classBox{
			display: flex;
		}
		.classList{
			text-align: center;
			width: 32%;
			margin-right: 2%;
			padding-top: 1rem;
			border: 1px solid #CC9933;
		}
		.classList:last-child{
			margin-right: 0;
		}
		.classList img{
			width: 2.5rem;
			height: 2.5rem;
		}
		.classNames{
			font-weight: bold;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.classType{
			color: #888;
			margin: .3rem 0;
		}
		.classProfit{
			width: 100%;
			background: linear-gradient(to right, #bb9d5f , #d8b978);
			height: 1.75rem;
			line-height: 1.75rem;
			color: #f3e9d6;
		}
		.dengji{
			display: flex;
			border: 1px solid #e4e4e4;
			margin: 1rem 0;
		}
		.dengjiBox{
			margin: .5rem 0;
			width: 50%;
			text-align: center;
		}
		.dengjiBox:first-child{
			border-right: 1px solid #e4e4e4;
		}
		.dengjiList{
			margin: 0 .5rem;
		}
		.dengjiList:first-child{
			border-bottom: 1px solid #e4e4e4;
		}
		.userDengji{
			margin: 0 auto;
			width: 6rem;
			border: 1px solid #CC9933;
			color: #BDA46D;
			height: 1.5rem;
			line-height: 1.5rem;
			border-radius: 4px;
		}
		.jiangli{
			padding: .5rem 0;
		}
		.dengjiList:last-child .userDengji{
			margin-top: .5rem;
		}
		.liaojie{
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 1rem 0;
			border: 1px solid #e4e4e4;
			color: #66CC66;
			font-size: 1rem;
			padding: .5rem;
		}
		.liaojie img{
			margin-left: .3rem;
			width: 1.3rem;
		}
	</style>
</head>
<body>
	<div class="tabsBox">
		<div class="topTab">
			<div class="tabLeft">收益中心</div>
			<div class="tabCenter"></div>
			<div class="tabRight"></div>
		</div>
	</div>
	<div class="profit">
		<div class="profitBox">
			<div class="profitMoney">收益 <span>1000.00</span>元</div>
			<a class="invite" href="../html/intive.html">邀请好友</a>
			<div class="moneyBox cleardrift">
				<div class="yugu">本月预估: 1212.00元</div>
				<div class="yugu">累计提现: 1212.00元</div>
			</div>
		</div>
		<div class="tuiguang cleardrift">
			<img src="../assets/20-xuanze.png" >
			<div class="tuiguangIntro">推广特权，每笔最高收益最高50%</div>
			<a class="tuiguangBtn" href="../html/upgrade.html">开通</a>
		</div>
		<div class="waitProfot">
			<div class="waitLeft">
				<div class="cuoguo cleardrift">
					<img src="../assets/wallet.png" >
					<span>待领收益(错过)</span>
				</div>
				<div class="waitMoney"><span>1838.85</span> 元</div>
			</div>
			<div class="waitRight">
				<a href="../html/waitProfit.html" class="look">查看详情 ></a>
				<div class="allProfit">累计22笔收益</div>
			</div>
		</div>
		<div class="userInfor cleardrift">
			<a class="userInforList cleardrift" href="../html/wallet.html">
					<div class="yuan"></div>
					<div class="userLeft cleardrift">
						<div class="user_title">钱包余额</div>
						<div class="userMoney">1000.01元</div>
					</div>
					<div class="userRight">
						<img src="../assets/7.png" >
					</div>
			</a>
			<a class="userInforList cleardrift" href="../html/invite_h.html">
				<div class="yuan"></div>
				<div class="userLeft cleardrift">
					<div class="user_title">邀请记录</div>
					<div class="userMoney">18人</div>
				</div>
				<div class="userRight">
					<img src="../assets/7.png" >
				</div>
			</a>
		</div>
		<div class="models">
			<div class="modelTop cleardrift">
				<div class="modelTitle">收益模式</div>
				<div class="modelMore">查看更多</div>
			</div>
			<div class="modelIntro">发现商机 会员专享 三大收益 极速提现</div>
			<div class="classBox">
				<div class="classList">
					<img src="../assets/20-xuanze.png" >
					<div class="classNames">直卖课程</div>
					<div class="classType">您得返现</div>
					<div class="classProfit">最高领50%</div>
				</div>
				<div class="classList">
					<img src="../assets/20-xuanze.png" >
					<div class="classNames">推荐流量主</div>
					<div class="classType">您得返现</div>
					<div class="classProfit">最高领50%</div>
				</div>
				<div class="classList">
					<img src="../assets/20-xuanze.png" >
					<div class="classNames">搭建私域流量池</div>
					<div class="classType">您得返现</div>
					<div class="classProfit">最高领50%</div>
				</div>
			</div>
		</div>
		<div class="dengji">
			<div class="dengjiBox">
				<div class="dengjiList">
					<div class="userDengji">普通会员</div>
					<div class="jiangli">直卖课程可领取10%奖励</div>
				</div>
				<div class="dengjiList">
					<div class="userDengji">合伙人</div>
					<div class="jiangli">直卖课程可领取50%奖励</div>
				</div>
			</div>
			<div class="dengjiBox">
				<div class="dengjiList">
					<div class="userDengji">黄金会员</div>
					<div class="jiangli">直卖课程可领取50%奖励</div>
				</div>
				<div class="dengjiList">
					<div class="userDengji">股东</div>
					<div class="jiangli">直卖课程可领取60%奖励</div>
				</div>
			</div>
		</div>
		<div class="liaojie">
			了解股东怎么赚钱<img src="../assets/question_c.png" >
		</div>
	</div>
	<div class="btmLogoBox">
	<div class="btmLogo">
		<div class="btmlogoList">
			<a href="../html/index.html">
				<img src="../assets/btm1.png" >
				<div class="btmLogoName">首页</div>
			</a>
		</div>
		<div class="btmlogoList">
			<a href="../html/douyin.html">
				<img src="../assets/btm2.png" >
				<div class="btmLogoName">抖音变现</div>
			</a>
		</div>
		<div class="btmlogoList">
			<a href="../html/centerProfit.html">
				<img src="../assets/btm33.png" >
				<div class="btmLogoName">收益中心</div>
			</a>
		</div>
		<div class="btmlogoList">
			<a href="../html/mine.html">
				<img src="../assets/btm4.png" >
				<div class="btmLogoName">我的</div>
			</a>
		</div>
	</div>
	</div>
</body>
</html>